- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=0 -->

<details><summary>Suggestion importance[1-10]: 8</summary>

Why: The suggestion enhances the documentation by explaining the nesting order, which is crucial for proper functionality. This aligns with the changes in the PR and provides valuable context for developers.


</details></details></td><td align=center>8

</td></tr><tr><td>



<details><summary>Add information about wrapping PortalManager with ToastManager in the setup instructions</summary>

___


**Consider mentioning that <code>ToastManager</code> should wrap <code>PortalManager</code> to ensure proper <br>functionality when using toasts within portals. This will provide a more complete <br>setup instruction and align with the changes made in other files.**

[packages/react-docs/pages/components/toast-manager/index.page.mdx [13-37]](https://github.com/trendmicro-frontend/tonic-ui/pull/936/files#diff-3aea5a94f2dfd32a155e165c3342bc413b27975a2ad7d3d04cd9cb1b682d560aR13-R37)

```diff
-Next, wrap your application with `ToastManager`:
+Next, wrap your application with `ToastManager`. Make sure `ToastManager` wraps `PortalManager` to enable adding toast notifications within a portal:
 
 ```jsx disabled
 <ToastManager
   TransitionProps={{
     sx: {
       '[data-toast-placement^="top"] > &:first-of-type': {
         mt: '4x', // the space to the top edge of the screen
       },
       '[data-toast-placement^="bottom"] > &:last-of-type': {
         mb: '4x', // the space to the bottom edge of the screen
       },
       '[data-toast-placement$="left"] > &': {
         ml: '4x', // the space to the left edge of the screen
       },
       '[data-toast-placement$="right"] > &': {
         mr: '4x', // the space to the right edge of the screen
       },
     },
   }}
   placement="bottom-right"
 >
-  <App />
+  <PortalManager>
+    <App />
+  </PortalManager>
 </ToastManager>

- [ ] **Apply this suggestion** <!-- /improve --apply_suggestion=1 -->

<details><summary>Suggestion importance[1-10]: 8</summary>

Why: This suggestion improves the setup instructions by clarifying the component hierarchy, which is essential for correct usage. It aligns with the PR changes and aids in preventing potential integration issues. 


</details></details></td><td align=center>8

</td></tr><tr><td rowspan=1><strong>Maintainability</strong></td>
<td>



<details><summary>Add a comment explaining the order of ToastManager and PortalManager components</summary>

___


**Consider adding a comment explaining why <code>ToastManager</code> needs to be above <br><code>PortalManager</code>. This will help future developers understand the importance of this <br>order and prevent accidental changes that could break the functionality.**

[packages/react-docs/pages/_app.page.js [136-154]](https://github.com/trendmicro-frontend/tonic-ui/pull/936/files#diff-49f34385f9684300c85addd1b7dc358db1cfc469e159754c0ea81c147fa99672R136-R154)

```diff
+{/* ToastManager needs to be above PortalManager to enable adding toast notifications within a portal */}
 <ToastManager
   TransitionProps={{
     sx: {
       '[data-toast-placement^="top"] > &:first-of-type': {
         mt: '4x', // the space to the top edge of the screen
       },
       '[data-toast-placement^="bottom"] > &:last-of-type': {
         mb: '4x', // the space to the bottom edge of the screen
       },
       '[data-toast-placement$="left"] > &': {
         ml: '4x', // the space to the left edge of the screen
       },
       '[data-toast-placement$="right"] > &': {
         mr: '4x', // the space to the right edge of the screen
       },
     },
   }}
 >
   <PortalManager>